<template>
  <div clas="xima">
    <header>
      <ol class="breadcrumb">
        <li>
          <router-link to="/foreign">合作</router-link>
        </li>
        <li>
          <router-link to="/research">调研交流</router-link>
        </li>
      </ol>
    </header>
    <div class="ximacontent">
      <div class="row">
        <div class="col-xs-12 col-md-8">
          <div class="researchContent">
            <div class="steps">
              <ul class="timeline-wrapper">
                <li>
                  <div class="position">学术合作</div>
                  <div class="line"></div>
                  <div class="desc">
                    <p>2019.11.28-2019.12.07</p>
                    <p>签署中德合作协议</p>
                    <p>
                      在中国·三亚由中华医学会急诊学会,德国急诊学会举行的“中德急救医学峰会”中
                    </p>
                  </div>
                </li>
                <li>
                  <div class="position">院际合作</div>
                  <div class="line"></div>
                  <div class="desc">
                    <p>德国福尔达大学附属医院</p>
                    <p>广东省中医院</p>
                  </div>
                </li>
                <li>
                  <div class="position">调研医院</div>
                  <div class="line"></div>
                  <div class="desc">
                    <div>
                      <img src="../assets/dy1.png" min-width="150" alt="" />
                      <div>调研瑞丽市人民医院、景成医院</div>
                    </div>
                    <div>
                      <img src="../assets/dy2.png" min-width="150" alt="" />
                      <div>调研保山市人民医院</div>
                    </div>
                    <div>
                      <img src="../assets/dy3.png" min-width="150" alt="" />
                      <div>调研大理大学第一附属医院</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-xs-6 col-md-4">
          <div class="guide">
            <div class="guideTop">
              <ul>
                <li>
                  <router-link to="/foreign"><span>德国合作</span></router-link>
                </li>
                <hr />
                <li>
                  <router-link to="/domestic">国内合作</router-link>
                </li>
                <hr />
                <li>
                  <router-link to="/cooperate">合作伙伴</router-link>
                </li>
                <hr />
                <li>
                  <router-link to="/research">调研交流</router-link>
                </li>
              </ul>
            </div>
            <div class="guideTip">
              <p class="connect_h">联系我们</p>
              <hr
                style="border-top: 1px solid #ccc"
                width="100%"
                color="#ccc"
                size="1"
              />
              <img src="../assets/code.jpg" alt="" />
              <div><span>电话：861068005755,861068006083</span></div>
              <div><span>Email: xmbj2005@163.com</span></div>
              <div><span>邮箱: 492800904@qq.com</span></div>
              <div>
                <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
/* 左边开始 */

/* 左边结束 */
/* 右边内容开始 */
.guide {
  width: 220%;
}
.guideTop {
  width: 100%;
  background-color: #005051;
  box-sizing: border-box;
}

.guideTop ul {
  list-style-type: none;
  box-sizing: border-box;
}
.guideTop ul li {
  padding: 0.625rem /* 10/16 */;
}
.guideTop ul hr {
  padding-left: 20px;
  padding-right: 20px;
  border: 0.0625rem /* 1/16 */ solid #fff;
  margin: 0;
}

.guideTop ul li a {
  padding: 0.625rem /* 10/16 */;
  color: #fff;
  font-size: 16px;
}
.guideTip {
  margin-top: 1.25rem /* 20/16 */;
}
.guideTip .connect_h {
  font-size: 28px;
  text-indent: 0;
  margin-bottom: 1.875rem /* 30/16 */;
}
.guideTip hr {
  margin: 0;
  padding: 0;
}

.guideTip div {
  white-space: nowrap;
  margin: 1.25rem /* 20/16 */ 0;
}

.guideTip div span {
  word-break: break-all;
}
/* 右边内容结束 */
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px) {
  .researchContent {
    width: 100%;
  }
  /* 左边内容开始 */
  .timeline-wrapper {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
  }
  .timeline-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ccc;
    left: 20%;
    margin-left: -2px;
  }
  .timeline-wrapper > li {
    position: relative;
  }
  .timeline-wrapper > li .position {
    display: block;
    width: 25%;
    position: absolute;
  }
  .timeline-wrapper > li .desc {
    margin: 0 0 15px 25%;
    font-size: 14px;
    color: #333333;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
  }
  .timeline-wrapper > li .line {
    width: 10px;
    height: 10px;
    font-family: "ecoico";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    background: #999;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ccc;
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -10px;
  }

  /* 左边内容结束 */
  /* 右边内容开始 */
  .guideTop {
    background-color: #f8f8f8;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTop ul {
    margin: 0;
    padding-bottom: 0;
    list-style-type: none;
    box-sizing: border-box;
  }
  .guideTop ul hr {
    padding: 0;
    margin: 0;
    height: 2px;
    margin: 0;
  }
  .guideTop ul li {
    margin-left: 0;
    padding-bottom: 0;
    list-style-type: none;
    padding: 0;
  }
  .guideTop ul li a {
    padding: 1.25rem /* 20/16 */;
    position: relative;
    color: #fff;
    background-color: #005051;
    font-weight: 600;
    display: block;
  }
  .guideTip .connect_h {
    font-size: 28px;
    text-indent: 0;
  }

  .guideTip div {
    height: 30px;
  }
  .guideTip hr {
    margin: 0 0 1.875rem /* 30/16 */;
    padding: 0;
  }
  .guideTip img {
    display: inline;
    border: 1px solid #ccc;
    margin-bottom: 1.875rem /* 30/16 */;
  }
  .guideTip p {
    text-align: left;
  }
  .guideTop div span {
    word-break: break-all;
    word-wrap: break-word;
  }
  /* 右边内容结束 */
}
</style>